<!-- 流体布局和相应式布局 -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="js/set_root.js"></script>
    <script type=" " src=""></script>s
    <title>天天生鲜-首页</title>
</head>

<body>
    <div class="mian_warp">
        <div class="header clearfix">
            <a href="#" class="logo "><img src="images/logo.png" alt="Logo图片"></a>
            <a href="#" class="search "></a>
        </div>
        <!-- 中间部分 -->
        <div class="center_con clearfix">
            <div class="slide"><img src="images/slide.jpg" alt="幻灯片"></div>
            <div class="menu_con clearfix">
                <ul class="menu">
                    <li>
                        <a href="#"></a>
                        <h2>水果</h2>
                    </li>
                    <li>
                        <a href="#"></a>
                        <h2>水果</h2>
                    </li>
                    <li>
                        <a href="#"></a>
                        <h2>水果</h2>
                    </li>
                    <li>
                        <a href="#"></a>
                        <h2>水果</h2>
                    </li>
                    <li>
                        <a href="#"></a>
                        <h2>水果</h2>
                    </li>
                    <li>
                        <a href="#"></a>
                        <h2>水果</h2>
                    </li>
                    <li>
                        <a href="#"></a>
                        <h2>水果</h2>
                    </li>
                    <li>
                        <a href="#"></a>
                        <h2>水果</h2>
                    </li>
                </ul>
            </div>
            <div class="common_model">
                <!-- 标题栏 -->
                <div class="common_title">
                    <h3>新鲜水果</h3>
                    <a href="#">more &gt;</a>
                </div>
                <!-- banner -->
                <a href="#" class="banner"><img src="images/banner.jpg" alt="banner"></a>

                <!-- 商品列表 -->
                <ul class="goods_list">
                    <li>
                        <a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
                        <h4>新西兰皇家大苹果</h4>
                        <p class="unit">12/提</p>
                        <p class="price">¥68.00</p>
                        <a href="#" class="add_chart"></a>
                    </li>
                    <li>
                        <a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
                        <h4>新西兰皇家大苹果</h4>
                        <p class="unit">12/提</p>
                        <p class="price">¥68.00</p>
                        <a href="#" class="add_chart"></a>
                    </li>
                    <li>
                        <a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
                        <h4>新西兰皇家大苹果</h4>
                        <p class="unit">12/提</p>
                        <p class="price">¥68.00</p>
                        <a href="#" class="add_chart"></a>
                    </li>
                </ul>
            </div>
            <div class="common_model">
                <!-- 标题栏 -->
                <div class="common_title">
                    <h3>新鲜水果</h3>
                    <a href="#">more &gt;</a>
                </div>
                <!-- banner -->
                <a href="#" class="banner"><img src="images/banner.jpg" alt="banner"></a>

                <!-- 商品列表 -->
                <ul class="goods_list">
                    <li>
                        <a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
                        <h4>新西兰皇家大苹果</h4>
                        <p class="unit">12/提</p>
                        <p class="price">¥68.00</p>
                        <a href="#" class="add_chart"></a>
                    </li>
                    <li>
                        <a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
                        <h4>新西兰皇家大苹果</h4>
                        <p class="unit">12/提</p>
                        <p class="price">¥68.00</p>
                        <a href="#" class="add_chart"></a>
                    </li>
                    <li>
                        <a href="#" class="goods_link"><img src="images/goods.jpg" alt="商品图片"></a>
                        <h4>新西兰皇家大苹果</h4>
                        <p class="unit">12/提</p>
                        <p class="price">¥68.00</p>
                        <a href="#" class="add_chart"></a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 底部菜单 -->
        <ul class="footer">
            <li>
                <a href=""></a>
                <h3>首页</h3>
            </li>
            <li>
                <a href=""></a>
                <h3>首页</h3>
            </li>
            <li>
                <a href=""></a>
                <h3>首页</h3>
            </li>
            <li>
                <a href=""></a>
                <h3>首页</h3>
            </li>
        </ul>


    </div>

</body>

</html>